import { Menu, Layout } from "antd";
import { useState } from "react";
import { NavLink } from "react-router-dom";

const { Header } = Layout;

const PageHeader = () => {
  const [current, setCurrent] = useState("mail");

  const tabsData = [
    {
      label: <NavLink to={"/"}>Home</NavLink>,
      key: "home",
    },
    {
      label: <NavLink to={"/game"}>Game</NavLink>,
      key: "game",
    },
  ];

  const onClick = (e) => {
    setCurrent(e.key);
  };

  return (
    <Header style={{ display: "flex", padding: "0" }}>
      <Menu
        onClick={onClick}
        selectedKeys={[current]}
        mode="horizontal"
        items={tabsData}
        style={{ flex: 1, minWidth: 0 }}
      />
    </Header>
  );
};

export default PageHeader;
